<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>过滤器</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="info" >
			<h2>{{info | upper}}</h2>
			<h2>{{info | lower|upper}}</h2>
			<h2>{{info |filterA('arg1','arg2')}}</h2>
			
		</div>
		<script>
			//声明一个全局的过滤器,实现首字母大写
			Vue.filter("upper",function(val){
				return val.charAt(0).toUpperCase()+val.slice(1);
			});
			/**
			 * @param {Object} n 表示管道符号前面的数据
			 * @param {Object} a 过滤器中第一个实参
			 * @param {Object} b 过滤器中第二个实参
			 */
			Vue.filter("filterA",function(n,a,b){
				if(n<10){
					return n+a;
				}else{
					return n+b;
				}
			})
			
			let vm=new Vue({
				el:'#app',
				data:{
					info:''
				},
				//局部的过滤器
				filters:{
					lower: function(val){
						//过滤器必须定返回值
						return val.toLowerCase();
					}
				}
			});
		</script>
	</body>
</html>
